<ion-content [fullscreen]="true">
  <ion-header mode="ios" collapse="condense">
    <ion-toolbar>
      <ion-icon
        slot="end"
        name="settings-outline"
        color="light"
        style="margin-right: 20px"
      ></ion-icon>
    </ion-toolbar>
  </ion-header>
  <!-- 用户信息 -->
  <div class="user">
    <ion-item detail lines="none">
      <!-- <ion-avatar style="margin-right: 10px"> -->
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F00%2F94%2F71%2F58dcd84dbf62a_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645710027&t=7fc3a17b63810021723d4b2bb8c08e0a"
      />
      <!-- </ion-avatar> -->
      <ion-label>
        <div (click)="doLogin()">{{login?user:'登录/注册'}}</div>
        <ion-badge [hidden]="!login" color="light" mode="ios">VIP01</ion-badge>
      </ion-label>
    </ion-item>
    <ion-grid fixed>
      <ion-row>
        <ion-col *ngFor="let item of [1,2,3,4]" size="3">
          <div>23</div>
          <div>关注</div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  <!--  -->
  <div class="details">
    <ion-grid fixed>
      <ion-row>
        <ion-col size="3">
          <ion-icon name="mail-outline"></ion-icon>
          <div>我的消息</div>
        </ion-col>
        <ion-col size="3">
          <ion-icon name="ticket-outline"></ion-icon>
          <div>我的影票</div>
        </ion-col>
        <ion-col size="3">
          <ion-icon name="wallet-outline"></ion-icon>
          <div>我的钱包</div>
        </ion-col>
        <ion-col size="3">
          <ion-icon name="receipt-outline"></ion-icon>
          <div>我的优惠券</div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  <div class="lists">
    <ion-item detail lines="none">
      <ion-label>想看的电影</ion-label>
    </ion-item>
    <ion-item detail lines="none">
      <ion-label>关注的影院</ion-label>
    </ion-item>
    <ion-item detail lines="none">
      <ion-label>看过的电影</ion-label>
    </ion-item>
    <ion-item detail lines="none">
      <ion-label>商城订单</ion-label>
    </ion-item>
    <ion-item detail lines="none">
      <ion-label>帮助反馈</ion-label>
    </ion-item>
    <ion-item detail lines="none">
      <ion-label>关于我们</ion-label>
    </ion-item>
  </div>
</ion-content>
